<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>网易的新闻列表</title>
        <link rel="stylesheet" href="./css/reset.css">
        <style>
            body {
                /* 这里可以去除 */
                background-color: #bfa;
            }

            a {
                /* 统一去除下划线 */
                text-decoration: none;
            }


            /* 设置容器的样式 */
            .news-wrapper {
                /* 设置宽度 */
                width: 300px;
                /* 设置高度 */
                height: 358px;
                /* 设置背景颜色 */
                background-color: #fff;
                /* 设置居中 */
                margin: 50px auto;

                /* 设置上边框边框 */
                border-top: 1px solid #ddd;


            }

            /* 设置标题的样式 */
            .new-title {


                /*
                    inline-block
                        1.使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
                        2.能够改变元素的height,width的值
                        3.可以设置padding,margin的各个属性值,top,left,bottom,right能够产生边距效果。

                    用通俗的话讲就是不独占一行的块级元素。

                */

                /* 为了边框和文字的宽度一致 需要讲h2转换为行内块元素 */
                /* 这样是设置,就是边框是被内容撑开的,如果内容有多少,边框就多宽 */
                display: inline-block;
                /* 设置标题的高度 */
                height: 30px;

                /* 设置上边框 */
                border-top: 1px red solid;

                /* 通过margin-top将h2上移,盖住上边框
                    设置正值是像下移动元素,设置负值像上移动
                */
                margin-top: -1px;

                /* 设置内上边距加10个像素,则将体育向下移动,同样高度也减去10px */
                padding-top: 10px;
            }

            /* 设置title中超链接的样式 */
            .new-title a {
                /* 去除下划线 */
                text-decoration: none;

                /* 设置颜色 */
                color: #404068;

                /* 设置文字的加粗效果 */
                font-weight: bold;

                /* 这里需要设置该元素下移 */
                /* 因为超链接是行内元素,所以垂直外边距不能用 */
                /* 可以给父元素设置一个padding,用父元素的折叠 */

            }

            /* 设置图片容器的样式 */
            .news-img {
                /* 这里设置高度,是防止下面元素溢出到上面的元素 */
                height: 150px;
            }

            /* 设置图片的文字效果 */
            .news-img .img-title {
                /* 向上移动文字 */
                margin-top: -30px;

                /* 设置字体加粗 */
                font-weight: bold;

                /* 设置字体颜色 */
                color: #fff;

                /* 设置内边距 字体又移 */
                padding-left: 20px;

            }

            /* 设置新闻列表 */
            .news-list {
                /* 将新闻列表下移20个像素 */
                margin-top: 20px;

                /* 将所有的新闻信息右移 */
                /* padding-left: 14px; */

                /* 设置项目符号
                    这个在不同的浏览器中显示的不同
                    搜狗输入法 输入v1是特殊符号
                    */
                /* list-style: square; */

            }

            /* 设置li */
            .news-list li {
                /* 设置下外边距 */
                margin-bottom: 17px;
            }

            /* 设置li中的文字 */
            .news-list li a {
                /* 设置字体大小 */
                font-size: 14px;

                /* 设置字体颜色 */
                color: #666;

            }


            /*
                这里使用交集选择器加伪元素选择器before选中每条新闻的最前面
            */
            .news-list li a:before {
                /* content会自动在选定的位置插入指定的字符 */
                content: '●';
                color: rgb(218, 218, 218);
                font-size: 12px;

                /* 添加右外边距,将新闻有移 */
                margin-right: 5px;

            }


            /* 设置鼠标移动上去,新闻列表变成红色 */
            .news-list li a:hover {

                color: red;

            }


        </style>
    </head>
    <body>
        <!-- 创新新闻列表的外侧的容器 -->
        <div class="news-wrapper">
            <h2 class="new-title">
                <a href="#">体育</a>
            </h2>
            <!-- 创建一个图片的容器 -->
            <div class="news-img">
                <a href="#">
                    <img src="./img/03/1.jpeg" alt="费德勒">
                    <!-- 创建图片的标题 -->
                    <h3 class="img-title">费德勒首负迪米 扶额摇头不满发挥</h3>
                </a>
            </div>
            <!-- 新闻列表 -->
            <div>
                <ul class="news-list">
                    <li>
                        <a href="#">乔治:我爱LA 喜欢和LBJ一起打球</a>
                    </li>
                    <li>
                        <a href="#">格林:3年前降薪就在等KD 特制T恤嘲讽LBJ</a>
                    </li>
                    <li>
                        <a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹震惊</a>
                    </li>
                    <li>
                        <a href="#">CBA下赛季新赛制: 常规赛赠至46轮</a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>